<template>
    <div class="mail-send-edit-dialog-container">
        <el-dialog class="editFundDialogTwo" :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="780px">

            <div class="select_form">

                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-form label-width="120px" style="margin-top: 40px" :model="state.ruleForm" :rules="rules" ref="malledisdiaFormRef">
                        <el-tab-pane label="基本信息" name="first">



                            <div style="display:flex;">
                                <el-form-item label="模板编码" v-if="!state.isEdit">
                                    <el-input style="width: 195px !important;" v-model="state.ruleForm.templateCode"></el-input>
                                </el-form-item>
                                <el-form-item label="模板编码" v-if="state.isEdit">
                                    <el-input style="width: 195px !important;" v-model="state.ruleForm.templateCode" disabled></el-input>
                                </el-form-item>
                                <el-form-item label="语言">
                                    <el-input style="width: 195px !important;" v-model="state.ruleForm.language"></el-input>
                                </el-form-item>
                            </div>


                            <div style="display:flex;">
                                <el-form-item label="发送人" prop="fromAddress">
                                    <el-select v-model="state.ruleForm.fromAddress" placeholder="请选择" clearable allow-create filterable>
                                        <el-option v-for="i in state.selectUserName" :key="i.value" :label="i.label" :value="i.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>

                            <div style="display:flex;">
                                <el-form-item label="接收人">
                                    <el-input v-model="state.ruleForm.toAddress"></el-input>
                                </el-form-item>
                            </div>

                            <div style="display:flex;">
                                <el-form-item label="抄送人">
                                    <el-input v-model="state.ruleForm.cc"></el-input>
                                </el-form-item>
                            </div>

                            <div style="display:flex;">
                                <el-form-item label="密送人">
                                    <el-input v-model="state.ruleForm.bcc"></el-input>
                                </el-form-item>
                            </div>

                            <div style="display:flex;">
                                <el-form-item label="主题">
                                    <el-input v-model="state.ruleForm.subject"></el-input>
                                </el-form-item>
                            </div>

                        </el-tab-pane>
                        <el-tab-pane label="模板内容" name="second">
                            <el-form-item label="抄送人" label-width="10px">
                                <!-- 模板内容 -->
                                <el-input style="width: 720px !important" type="textarea" :rows="19" v-model="state.ruleForm.templateText"></el-input>
                            </el-form-item>
                        </el-tab-pane>

                        <el-tab-pane label="预览模板" name="third">
                            <!-- 预览模板 -->
                            <div v-html="state.ruleForm.templateText" style="width: 100% !important"></div>
                        </el-tab-pane>
                    </el-form>
                </el-tabs>
            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">取 消</el-button>
                    <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
                </span>
            </template>

        </el-dialog>

    </div>
</template>

<script setup lang="ts" name="mailte,plateeditdialog">
import { ElMessage } from 'element-plus';
import { reactive, ref, watch } from 'vue';


// 导入接口


import { useMailApi } from "../../../api/mail";
import type { TabsPaneContext } from 'element-plus'
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    //console.log(tab, event)
}


const malledisdiaFormRef = ref();


// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);


const rules = {
    fromAddress: [
        {
            required: true,
            message: "不能为空，请重新输入！",
            trigger: "blur"
        },
        { min: 5, max: 50, message: "长度在5到50个字符", trigger: "blur" }
    ]
}


const state = reactive({
    // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
    //activeName:"",
    isEdit: false,
    selectUserName: [] as any,
    ruleForm: {
        templateCode: "",
        language: "",
        fromAddress: "",
        toAddress: "",
        cc: "",
        bcc: "",
        subject: "",
        templateText: "",
        templateId: null
    } as any,
    dialog: {
        isShowDialog: false,
        type: '',
        title: '',
        submitTxt: '',
    },
});

// 打开弹窗
const openDialog = async (type: string, row?: any) => {
    queryMailboxConfig();
    if (type === 'edit') {
        state.ruleForm = {
            templateCode: row.templateCode,
            language: row.language,
            fromAddress: row.fromAddress,
            toAddress: row.toAddress,
            cc: row.cc,
            bcc: row.bcc,
            subject: row.subject,
            templateText: row.templateText,
            templateId: row.templateId,

        }

        state.dialog.title = '编辑配置';
        state.dialog.submitTxt = '修改';
    } else {

        state.ruleForm = {
            templateCode: "",
            language: "",
            fromAddress: "",
            toAddress: "",
            cc: "",
            bcc: "",
            subject: "",
            templateText: "",

        }
        state.dialog.title = '新增配置';
        state.dialog.submitTxt = '新 增';
        // 清空表单，此项需加表单验证才能使用
    }
    state.dialog.type = type;

    state.dialog.isShowDialog = true;

};
// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;

};
const queryMailboxConfig = async () => {
    try {
        let vo = {
            limit: state.ruleForm.limit,
            page: state.ruleForm.page
        } as any;
        state.selectUserName = [];
        let tempList = await useMailApi().queryMailboxConfig(vo);
        tempList.list.forEach((e: any) => {
            state.selectUserName.push({
                label: e.userName,
                value: e.userName
            })
        });

    } catch (error: any) {
        ElMessage.error(error.msg);
    }
}


// 取消
const onCancel = () => {
    closeDialog();

};
// 提交
const onSubmit = () => {
    // 检查顶层表单
    malledisdiaFormRef.value.validate(async (valid: any) => {

        if (valid) {
            //检查参数列表
            try {
                if (state.dialog.type == 'edit') {
                    let vo = Object.assign({}, {}, state.ruleForm);

                    await useMailApi().updateMailboxTemplate(vo)

                } else {
                    let vo = state.ruleForm;
                    await useMailApi().addMailboxTemplate(vo)
                }
                ElMessage.success("操作成功");
                closeDialog(); // 关闭弹窗
                emit('refresh');
            } catch (error: any) {
                ElMessage.error(error.msg);
            }
        } else {
            ElMessage.warning("请检查数据的正确性！");
        }
    });
};





watch(
    () => state.dialog.isShowDialog,
    (newValue) => {
        if (newValue == true) {

        }
    }, { immediate: true }
);




// 暴露变量
defineExpose({
    openDialog,
});


</script>











<style lang="scss">
.el-select {
    width: 100% !important;
}

.el-form .el-form-item:last-of-type {
    margin-bottom: 22px !important;
}


.mail-send-edit-dialog-container {
    .bar_tools {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .el-table__expanded-cell {
        padding: 20px;
    }


    .alig_container {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        &>div {
            margin: 15px 0px;
            display: flex;
            justify-content: center;
        }
    }
}

.editFundDialogTwo {
    min-height: 800px;

    .el-input {
        width: 520px !important;
    }

    .select_form {
        width: 100%;
        // margin: 0px  40px;
    }
}
</style>